<template>
	<view class="article">
		<view class="article-title">{{form.title}}</view>
		<uni-list :border="false">
			<uni-list-item>
				<!-- 通过body插槽定义作者信息内容 -->
				<template v-slot:body>
					<view class="header-content">
						<view class="uni-note">{{vk.pubfn.timeFormat(form.publish_time, "yyyy年MM月dd日 hh时")}} </view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<view class="article-content" v-html="parseRichText(form.content)">
			<!-- <rich-text :nodes="parseRichText(form.content)" style="font-size: 14px;line-height: 1.8;color:#333"></rich-text> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					title: '',
					content: '',
					publish_time: '',
				},
			}
		},
		onLoad(options = {}) {
			if (options.id) {
				this.id = options.id
				this.initPage(options);
			}
		},
		methods: {
			// 格式化img标签，避免img超出页面
			parseRichText(html) {
				if (html) {
					let arr = html.split('<img');
					html = arr.join('<img width=100%');
					
					// arr = html.split('<p');
					// html = arr.join('<p style="text-indent: 2rem;"');
				}
				return html;
			},
			initPage(options) {
				// #ifdef H5
				this.$nextTick(function() {
					// #endif
					this.getData();
					// #ifdef H5
				})
				// #endif
			},
			// 应用详情
			getData() {
				vk.callFunction({
						url: this.$api.ExampleInfo,
						loading: true,
						data: {
							_id: this.id
						},
					})
					.then(res => {
						this.form = res.item
						uni.setNavigationBarTitle({
							title: res.item.title
						})
					})
			},
		}
	}
</script>

<style scoped>
	.header-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: 14px;
	}

	/* 标题 */
	.uni-title {
		display: flex;
		margin-bottom: 5px;
		font-size: 14px;
		font-weight: bold;
		color: #3b4144;
	}

	/* 描述 额外文本 */
	.uni-note {
		color: #999;
		font-size: 12px;
	}

	.footer {
		display: flex;
		align-items: center;
	}

	.footer-button {
		display: flex;
		align-items: center;
		font-size: 12px;
		height: 30px;
		color: #fff;
		background-color: #ff5a5f;
	}

	.banner {
		position: relative;
		margin: 0 15px;
		height: 180px;
		overflow: hidden;
	}

	.banner-img {
		position: absolute;
		width: 100%;
	}

	.banner-title {
		display: flex;
		align-items: center;
		position: absolute;
		padding: 0 15px;
		width: 100%;
		bottom: 0;
		height: 30px;
		font-size: 14px;
		color: #fff;
		background: rgba(0, 0, 0, 0.4);
		overflow: hidden;
		box-sizing: border-box;
	}

	.uni-ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.article-title {
		padding: 20px 15px;
		padding-bottom: 0;
		font-size: 18px;
		font-weight: 700;
	}

	.article-content {
		padding: 15px;
		font-size: 15px;
		overflow: hidden;
	}
</style>